<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城</title>
	<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />
    <meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" />
	<!--处理样式-->
	<link rel="stylesheet" type="text/css" href="static/css/reset.css">
	<!--公共的CSS-->
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<!--首页的CSS-->
	<link rel="stylesheet" type="text/css" href="static/css/index.css">
	<!--引入网页标题图标-->
	<link rel="shortcut icon" type="static/image/x-icon" href="static/img/favicon.ico">
</head>
<style>
.my_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用 flexbox 布局 */
    flex-wrap: wrap; /* 允许内容换行 */
    justify-content: flex-start; /* 从左到右排列 */
}

.my_list li {
    width: 200px; /* 设置每个产品项的宽度，包括图片和文本内容 */
    margin-right: 10px; /* 产品项之间的右侧间距 */
    margin-bottom: 10px; /* 产品项之间的下方间距 */
}

.comment_product {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333; /* 设置链接文字颜色 */
}

.comment_product img {
    display: block;
    width: 170px;
    height: 170px;
    margin: 0 auto 5px; /* 图片居中显示，并在下方留出一定间距 */
}

.comment_product .product_title {
    display: block;
    font-size: 16px;
    margin-bottom: 5px; /* 标题下方留出一定间距 */
}

.comment_product .price {
    display: block;
    color: #f00; /* 设置价格文字颜色 */
    font-size: 14px;
}

</style>
<body>
<div class="page-top">
	<div class="container">
	<div class="top-lt">
		<a href="/index">小米商城</a>
			<span>|</span>
		<a href="">MIUI</a>
			<span>|</span>
		<a href="">IoT</a>
			<span>|</span>
		<a href="">云服务</a>
			<span>|</span>
		<a href="">金融</a>
			<span>|</span>
		<a href="">有品</a>
			<span>|</span>
		<a href="">小爱开放平台</a>
			<span>|</span>
		<a href="">企业团购</a>
			<span>|</span>
		<a href="">资质证照</a>
			<span>|</span>
		<a href="">协议规则</a>
			<span>|</span>
		<a href="" class="download">下载app
			<div class="down-box">
				<img src="static/img/download.png" alt="小米商城">
				小米商城APP
			</div>
		</a>
			<span>|</span>
		{% if session['logged_in'] %}
                                 <a href="/job">可视化</a>
									<span>|</span>
                            {% endif %}


	<div class="top-gt">
		<div class="car-box">
			<a href="" class="tit">购物车</a>
			<div class="pop">
			<!--	<p class="no-good">购物车还没有商品，赶紧选购吧！</p>  -->
			<ul class="list">
				{%for product in comment_products1 %}
				<li>
					<a href="" class="pic"><img src="static/img/xiaomi14_1.png"></a>
					<div class="txt">小米14，{{product.config}}</div>
					<div class="num">
						<i >X</i>

						<h4>{{product.price}}</h4>

					</div>
				</li>
				{%endfor%}

			</ul>
			<div class="total">
				<div class="price">
					<p>共{{num}}件商品</p>
					<h3>{{price}}</h3>
				</div>
				<a href="" class="btn">立即结算</a>
			</div>

			</div>
		</div>
		<div class="login">
			{% if session['logged_in'] %}
                                <span class="username">欢迎{{session['username']}}登录</span>
			<span>|</span>
									<a href="/product_board">商品管理</a>
			<span>|</span>
                                <a href="/logout">退出</a>

                            {% else %}
                                <a href="/login">登录</a>
                            {% endif %}
			<span>|</span>
			<a href="register">注册</a>
			<span>|</span>





		</div>
		<!--<div class="userinfo">
			<a href="" class="link">消息通知</a>
			<a href="" class="link">我的订单</a>
			<div class="user">
				<a href="" class="tit">用户~~</a>
				<ul>
				<li><a href="">个人中心</a></li>
				<li><a href="">评价晒单</a></li>
				<li><a href="">我的喜欢</a></li>
				<li><a href="">小米账号</a></li>
				<li><a href="">退出登录</a></li>
				</ul>
			</div>
-->		</div>
	</div>
	</div>
</div>
<!--导航-->
<div class="page-nav">
	<div class="container">
		<a href="{{ url_for('index') }}" class="logo"></a>
		<ul class="nav">
			<li class="nav-item" id="page-all-nav">
				<a href="" id="allcat" style="font-size:16px;">全部商品分类</a>
				<!-- 全部分类下拉菜单-->
				<div class="slider-nav">
					<ul class="slider-ul">
						<li class="slider-li">
							<a href="" class="name">
								<span>手机</span>
								<span class="You">></span>
							</a>
							<div class="slider-pop">
								<a href="" class="pop-li">
								<img src="static/img/number.webp">
								<p>小米数字旗舰</p>
								</a>
								<a href="" class="pop-li">
								<img src="img/k.png">
								<p>红米数字旗舰</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/note.webp">
								<p>红米note系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/mix.webp">
								<p>小米MIX系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/civi.png">
								<p>小米civi系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/turbo.webp">
								<p>红米turbo系列</p>
								</a>
							</div>
						</li>

						<li class="slider-li">
							<a href="" class="name">
								<span>电视</span>
								<span class="You">></span>
							</a>
							<div class="slider-pop">
								<a href="" class="pop-li">
								<img src="static/img/s_pro.webp">
								<p>小米电视 S Pro Minni LED</p>
								</a>
								<a href="" class="pop-li">
								<img src="img/s_min.webp">
								<p>小米电视 S Mini LED系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/s.webp">
								<p>小米电视 S系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/a.webp">
								<p>小米电视A竞技系列</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/mix100.webp">
								<p>Redmi电视 MAX100</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/max85.webp">
								<p>Redmi电视 MAX100</p>
								</a>
							</div>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>声乐</span>
								<span class="You">></span>
							</a>
							<div class="slider-pop">
								<a href="" class="pop-li">
								<img src="static/img/erji1.jpg">
								<p>小米开放式耳机</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/erji2.jpg">
								<p>Redmi Buds 5 Pro</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/erji3.jpg">
								<p>Redmi Buds 5</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/erji4.jpg">
								<p>Redmi Buds 5 A</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/erji5.jpg">
								<p>Xiaomi Buds 4</p>
								</a>
							</div>
						</li>

						<li class="slider-li">
							<a href="" class="name">
								<span>平板</span>
								<span class="You">></span>
							</a>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>笔记本</span>
								<span class="You">></span>
							</a>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>路由器</span>
								<span class="You">></span>
							</a>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>电源</span>
								<span>配件</span>
								<span class="You">></span>
							</a>
							<div class="slider-pop">
								<a href="" class="pop-li">
								<img src="static/img/change1.jpg">
								<p>充电器</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change2.jpg">
								<p>插座</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change3.jpg">
								<p>移动电源</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change4.jpg">
								<p>数据线</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change5.jpg">
								<p>手机贴膜</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change6.jpg">
								<p>手机壳</p>
								</a>
								<a href="" class="pop-li">
								<img src="static/img/change7.jpg">
								<p>无线充电器</p>
								</a>
							</div>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>智能家居</span>
								<span class="You">></span>
							</a>
						</li>
						<li class="slider-li">
							<a href="" class="name">
								<span>智能穿戴</span>
								<span class="You">></span>
							</a>
						</li>

						<li class="slider-li">
							<a href="" class="name">
								<span>小米汽车</span>
								<span class="You">></span>
							</a>
							<div class="slider-pop">
								<a href="" class="pop-li">
								<img src="static/img/su7.png" >
								<p>小米su7</p>
								</a>
								</div>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a href="" class="tit">小米手机</a>
				<div class="pop">
					<ul class="down-ul container">
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/micivic4.webp">
							</a>
							<h3 class="name">小米civic4</h3>
							<i></i>
						</li>
						<li class="down-li">
								<img src="static/img/mi14.webp">
							</a>
							<h3 class="name">小米14</h3>
							<i></i>
						</li>
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/mi14pro.webp">
							</a>
							<h3 class="name">小米14Pro</h3>
							<i></i>
						</li>
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/mi14ultra.webp">
							</a>
							<h3 class="name">小米14ultra</h3>
							<i></i>
						</li>
						<li class="down-li last">
							<a href="" class="pic">
								<img src="static/img/mix fold 7.webp">
							</a>
							<h3 class="name">小米MIX fold 3</h3>
							<i></i>
						</li>
						<li class="down-li last">
							<a href="" class="pic">
								<img src="static/img/micivi3.webp">
							</a>
							<h3 class="name">小米civi3</h3>
							<i></i>
						</li>

					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a href="" class="tit">Redmi 红米</a>
				<div class="pop">
					<ul class="down-ul container">
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/turbo3.webp">
							</a>
							<h3 class="name">红米turbo3</h3>
							<i></i>
						</li>
						<li class="down-li">
								<img src="static/img/k70e.webp">
							</a>
							<h3 class="name">红米k70e</h3>
							<i></i>
						</li>
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/k70.webp">
							</a>
							<h3 class="name">红米k70</h3>
							<i></i>
						</li>
						<li class="down-li">
							<a href="" class="pic">
								<img src="static/img/k70pro.webp">
							</a>
							<h3 class="name">红米70pro</h3>
							<i></i>
						</li>
						<li class="down-li last">
							<a href="" class="pic">
								<img src="static/img/note13pro.webp">
							</a>
							<h3 class="name">红米note13pro</h3>
							<i></i>
						</li>

					</ul>
				</div>
			</li>
			<li class="nav-item">
				<a href="" class="tit">电视</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">笔记本</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">家电</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">路由器</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">智能硬件</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">服务</a>
			</li>
			<li class="nav-item">
				<a href="" class="tit">社区</a>
			</li>
		</ul>
		<!--搜索框-->
		<div class="search">
			<form action="" method="post">
				<input type="text" name="" class="q">
				<input type="submit" class="btn" name="" value="">
				<div class="tags">
					<span  >小米14</span>
				</div>

				<ul class="hot">
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>
					<li>
						<a href="">
						<span>红米K30 pro</span>
						</a>
					</li>

				</ul>
			</form>
		</div>
	</div>
</div>

<!--轮播导航S-->
<div class="banner" >
    <div class="content">
      <ul id="item">
        <li class="item active" ><a href="#"><img src="static/img/1.jpg"></a></li>
        <li class="item" ><a href="#"><img src="static/img/2.jpg"></a></li>
        <li class="item" ><a href="#"><img src="static/img/3.jpg"></a></li>
        <li class="item" ><a href="#"><img src="static/img/4.jpg"></a></li>
        <li class="item" ><a href="#"><img src="static/img/5.jpg"></a></li>
      </ul>
      <div id="btn-left"></div>
      <div id="btn-right"></div>
      <ul id="point">
        <li class="point active" data-index="0"></li>
        <li class="point" data-index="1"></li>
        <li class="point" data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
      </ul>
    </div>
  </div>

	<script src="static/js/index.js"></script>


<!--轮播导航S-->
<!-- 菜单广告位-->
<div class="idx-menu-adv  container">
	<ul class="menu">
		<li class="content"><a href=""><img src="static/img/menu1.png">选购手机</a></li>
		<!--<li class="after"></li> <li class="before"></li>-->
		<li class="content"><a href=""><img src="static/img/menu2.png">企业团购</a></li>
		<!--<li class="after"></li> <li class="before"></li>-->
		<li class="content"><a href=""><img src="static/img/menu3.png">F码通道</a></li>
		<li class="content"><a href=""><img src="static/img/menu4.png">米粉卡</a></li>
		<!--<li class="after">-->
		<li class="content"><a href=""><img src="static/img/menu5.png">以旧换新</a></li>
		<!--<li class="after">-->
		<li class="content"><a href=""><img src="static/img/menu6.png">话费充值</a></li>
	</ul>
	<a href="index2" class="pic"><img src="static/img/adv1.png"></a>
	<a href="" class="pic"><img src="static/img/adv2.png"></a>
	<a href="" class="pic"><img src="static/img/adv3.png"></a>
</div>

<!--广告图 -->
<div class="idx-adv container">
	<a href=""><img src="static/img/adv4.png"></a>
 </div>

<!-- 大内容区-->
<div class="idx-container">
	<div class="container">
		<!-- 手机 -->
		<div class="idx-title">
			<h2 class="tit">手机</h2>
			<a class="see-all" href="">查看全部</a>
		</div>
		<div class="idx-phone idx-box">
		<div class="idx-leftadv">
			<a href=""><img src="static/img/adv5.png"></a>
		</div>
		<div class="good-box col-5">
<!--从数据库读取图片以及介绍-->
{% for product in comment_products %}
				<div class="phoneli col-5">
					<img src="{{ product.images }}"/>
					<h3>{{product.pname}}</h3>
					<span>价格：{{product.new_price}}</span>
					<h1></h1>
					<span style="">剩余数量：{{product.counts}}</span>
				</div>
 {% endfor %}

		</div>s
		</div>
	</div>
</div>



<!-- 侧边栏-->
<ul class="page-slider">
	<li calss="APP">
		<a href="">
		<img src="static/img/phoneAPP.png" class="imgf">
		<img src="static/img/phoneAPP2.png" class="imgf imgs">
		<span>手机APP</span>
		</a>
		<div class="rightpop">
				<img src="static/img/download.png">
				<p>扫码领取新人百元礼包</p>
		</div>
	</li>
	<li>
		<a href="">
		<img  src="static/img/user1.png" class="imgf">
		<img src="static/img/user2.png" class="imgf imgs">
		<span>个人中心</span>
		</a>
	</li>
	<li>
		<a href="">
		<img  src="static/img/user1.png" class="imgf">
		<img src="static/img/user2.png" class="imgf imgs">
		<span>售后服务</span>
		</a>
	</li>
	<li>
		<a href="">
		<img src="static/img/server1.png" class="imgf">
		<img src="static/img/server2.png" class="imgf imgs">
		<span>联系客服</span>
		</a>
	</li>
	<li>
		<a href="">
		<img src="static/img/car1.png" class="imgf">
		<img src="static/img/car2.png" class="imgf imgs">
		<span>购物车</span>
		</a>
	</li>
	<li>
		<a href="">
		<img src="static/img/server1.png" class="imgf">
		<img src="static/img/server2.png" class="imgf imgs">
		<span>返回顶部</span>
		</a>
	</li>
</ul>


</body>
</html>

